<template>
  <breadCrumb :item="item" ref="breadcrumb"></breadCrumb>
  <div class="table-wrapped">
    <!-- 1.顶部 -->
    <div class="table-header">
      <!-- 1-1. 表格顶部 -->
      <div class="table-top">
        <!-- 搜索框 -->
        <div class="search-wrapped">
          <el-input v-model="adminAccount" class="w-50 m-2" size="large" placeholder="输入账号进行搜索" 
                    :prefix-icon="Search" @change='searchAdmin()' clearable  @clear="clearInput()" />
        </div>
        <!-- 按钮 -->
        <div class="button-wrapped">
          <el-button type="primary" @click="openCreate(3)">添加消息管理员</el-button>
        </div>
      </div>

      <!-- 1-2. 表格内容 -->
      <div class="table-content">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50" :index="indexMethod"/>
          <el-table-column prop="account" label="账号" />
          <el-table-column prop="name" label="姓名" width="170" />
          <el-table-column prop="sex" label="性别" width="100"/>
          <el-table-column prop="department" label="部门" width="150" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="update_time" label="更新时间">
						<template #default="{row}">
							<div>{{row.update_time?.slice(0,10)}}</div>
						</template>
					</el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="{row}"> 
              <div>
                <el-button type="success" @click="openEdit(row.id)">编辑</el-button>
                <el-button type="danger" @click="openDelete(row.id)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 2. 底部 -->
    <div class="table-footer">
      <el-pagination :page-size="1" :current-page="paginationData.currentPage" :pager-count="7"
        :total="paginationData.adminTotal" :page-count="paginationData.pageCount" @current-change="currentChange"
        layout="prev, pager, next" />
    </div>
  </div>

  <createA ref="Create"></createA>
  <editA ref='Edit'></editA>
  <deleteA ref="Delete"></deleteA>

</template>
 
<script setup lang="ts">
  import { ref, onBeforeUnmount, reactive } from 'vue';
  import { ElMessage } from 'element-plus';
  import breadCrumb from '@/components/bread_crumb.vue';
  import { Search } from '@element-plus/icons-vue';
  import { bus } from "@/utils/mitt.js"; 
  import createA from "../components/create_admin.vue";
  import editA from "../components/edit_admin.vue";
  import deleteA from '../components/delete_admin.vue';
	import { searchUser, getAdminListLength, returnListData } from '@/api/userinfor.js';

  const breadcrumb = ref() // 面包屑
	const item = ref({       // 面包屑参数
		first: '用户管理 / 管理员管理 / 消息管理员',
	})

  const indexMethod = (index:number) => { // index从0开始 
    if(paginationData.currentPage===1){
      return index+1
    }else{
      return (paginationData.currentPage-1) * 10 + (index+1)
    }
  }

  // 将输入框的值与组件实例中的 adminAccount 数据进行双向绑定
	const adminAccount = ref<number>()
  // 表格内容
	const tableData = ref()

  // 搜索内容  account identity
  const searchAdmin = async () => {
    const res = await searchUser(adminAccount.value, '消息管理员')  
    tableData.value = res.data
  }
  const clearInput = async() => {
    const res = await returnListData(paginationData.currentPage, '消息管理员')
    tableData.value = res.data
  }

  // 添加管理员  打开弹窗
  const Create = ref() 
  const openCreate = (id:number) => {
    // 传递给弹窗 createId
    bus.emit('createId', id)
    Create.value.open() 
  }

  // 打开编辑管理员弹窗
  const Edit = ref()
  const openEdit = (id:number) => {
    bus.emit('editId', id)
		Edit.value.open()
  }

  // 打开删除管理员弹窗
	const Delete = ref()
  const openDelete = (id:number) => {
    bus.emit('deleteId', id)
		Delete.value.open()
  }

  bus.on('adminDialogOff', async (id : number) => {
		// 1为创建管理员
		if (id == 1) { 
			getFirstPageList()
		}
		// 2为编辑管理员
		if (id == 2) {
			const res = await returnListData(paginationData.currentPage, '消息管理员')
      tableData.value = res.data
		}
		// 3为对管理员进行降职
		if (id == 3) {
			const res = await returnListData(paginationData.currentPage, '消息管理员')
      tableData.value = res.data
      getFirstPageList()
		}
	})

  // ---------------------------------------------------------------------------------------------------------------分页数据
	const paginationData = reactive({ 
		pageCount: 1, // 总页数 
		currentPage: 1, // 当前所处页数
    adminTotal : 0,  // 设置总的记录数
	})

  // 获取管理员的数量
  const returnAdminListLength = async () => {
    const res = await getAdminListLength('消息管理员')
    paginationData.adminTotal = res.data.length
    let len = Math.ceil(res.data.length / 10)
    paginationData.pageCount = len>0 ? len : 1
  }
  returnAdminListLength()

  // 默认获取第一页的数据
  const getFirstPageList = async () => {
    const res = await returnListData(1, '消息管理员')
    tableData.value = res.data
    returnAdminListLength()
    paginationData.currentPage = paginationData.currentPage>0 ? paginationData.currentPage : 1
  }
  getFirstPageList()

  // 当当前页码发生变化时, 监听换页
  const currentChange = async (value:number) => {
    paginationData.currentPage = value
    const res = await returnListData(paginationData.currentPage, '消息管理员')
    tableData.value = res.data
  }
</script>
 
<style lang="scss" scoped>
  .table-wrapped {
    padding: 8px;
    height: calc(100vh - 96px); // -101px
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .table-header {
      .table-top {
        padding: 0 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 48px;
        background: #fff;
      }
      .table-content {
        min-height: 10px;
        padding: 10px 20px 20px;
        background: #fff;
      }
    }

    .table-footer {
      display: flex;
      justify-content: flex-end;
    }
  }

  :deep(.el-input__inner) {
    height: 30px;  // 32
    padding: 0 15px;
  }
</style>

